<template>
	<view class="">
		<view class="tab-nav ">
			<view class=" tab-list-item" v-for="(item,index) in toggleList" :key="index"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: indexs==index}" class="text">{{ item.label }}</view>
				<view class="line" v-if="indexs==index">
				</view>
			</view>
		</view>
		<view class="BoxNum">
			<text class="left" >红包个数</text>
			<view class="rights">
				<input type="number" v-model="number" placeholder="填写个数" />
				<text>个</text>
			</view>
		</view>
		<view class="BoxNum" v-if="indexs==0">
			<view class="left">
				总金额 <image class="tag"
								src="https://images.fudiemall.com/storage/default/20250627/pin06b91c8d9ca48e37e4191523462c1d5d4aee193c.png"
								mode="aspectFill"></image>
			</view>
			<view class="rights">
				<input type="digit" v-model="money" placeholder="0.00" />
			</view>
		</view>
		<view class="BoxNum" v-if="indexs==1">
			<view class="left">
				单个金额 
			</view>
			<view class="rights">
				<input type="digit" v-model="money" placeholder="0.00" />
			</view>
		</view>
		<view class="tit">
			<input type="text" maxlength="40" v-model="content" placeholder="恭喜发财,大吉大利" />
		</view>
		<view class="BoxNum"  @click="goCover">
			<text class="left" >红包封面</text>
			<view class="rights" >
				
				<text>{{configInfo.template.name}}</text>
				<image class="toright" :src="baseUrl +'/static/icon/bigright.png'" mode="aspectFill"></image>
			</view>
		</view>
		<view class="BoxMoney" v-if="indexs==0">
			<image src="https://images.fudiemall.com/storage/default/20250627/moresssa41fd2f340c5e4a85a27a5a70315149a158a155b.png" mode="aspectFill"></image>
			<text>{{money||"0.00"}}</text>
		</view>
		<view class="BoxMoney" v-if="indexs==1">
			<image src="https://images.fudiemall.com/storage/default/20250627/moresssa41fd2f340c5e4a85a27a5a70315149a158a155b.png" mode="aspectFill"></image>
			<text>{{money*number||"0.00"}}</text>
		</view>
		<view class="btn" @click="submit">
			塞红包
		</view>
		<view class="tips">
			仅支持使用More券塞红包
		</view>
		<u-keyboard ref="uKeyboard" dotDisabled mode="number" bgColor="transparent" closeOnClickOverlay :tooltip="false"
			:show="keyboardShow" @close="isClose" @change="changePwd" @backspace="backspace">
			<view class="keyboardss flex_ZC">
				<u-code-input dot space="26" :maxlength="6" v-model="securityPwd"></u-code-input>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	
	import {redConfig,sending } from "../../api/red.js"
	export default{
		data(){
			return{
				toggleList: [{
						label: '拼手气红包',
						type_red: "1",
						select: true
					},
					{
						label: '普通红包',
						type_red: "0",
						select: false
					},
				
				
				],
				indexs: 0,
				number:"",
				money:"",
				content:"",
				baseUrl: this.$imageBaseUrl,
				configInfo:{
					template:{}
				},
				keyboardShow: false,
				securityPwd: '',
				type_red:1,
				type:""
			}
		},
		watch: {
			securityPwd(newValue) {
				console.log(newValue.length);
				if (newValue.length >= 6) {
					this.keyboardShow = false
					this.send()
				}
			},
	
		},
		onShow() {
			this.getconfig()
		},
		onLoad(e) {
			this.type=e.type
			if(e.id){
				this.hx_group_id=e.id
			}
		},
		methods:{
			send(){
				sending({
					remark:this.content,
					type_red:this.type_red,
					give_out_type:this.type,
					hx_group_id:this.hx_group_id,
					more_amount:this.indexs?this.money*this.number:this.money,
					number:this.number,
					pay_password:this.securityPwd
				}).then(res=>{
					if(res.code==1){
						if(this.type==1){
							uni.redirectTo({
								url: "/pageDao/groupchat/groupchat?id=" + this.hx_group_id
							})
							
						}else{
							uni.navigateTo({
								url:"/pageUser/redEnvelope/sendOut?id="+res.data.id+"&type="+res.data.give_out_type
							})
						}
						
					}
				})
			},
			submit(){
				if(this.number < Number(this.configInfo.red_min_number) ){
					uni.$u.toast("红包个数最小为"+this.configInfo.red_min_number+"个")
					return
				}
				if(this.number > Number(this.configInfo.red_max_number) ){
					uni.$u.toast("红包个数最小为"+this.configInfo.red_max_number+"个")
					return
				}
				if(this.indexs==0&&( Number(this.money) >=this.number* Number(this.configInfo.red_max_amount)) ){
					uni.$u.toast("红包金额最大为"+this.number* Number(this.configInfo.red_max_amount))
					return
				}
				if(this.indexs==0&&( Number(this.money) <this.number* Number(this.configInfo.red_min_amount)) ){
					uni.$u.toast("红包金额最小为"+this.number* Number(this.configInfo.red_min_amount))
					return
				}
				if(this.indexs==1&&( Number(this.money) >= Number(this.configInfo.red_max_amount)) ){
					uni.$u.toast("单个红包金额最大为"+ Number(this.configInfo.red_max_amount))
					return
				}
				if(this.indexs==1&&( Number(this.money) < Number(this.configInfo.red_min_amount)) ){
					uni.$u.toast("单个红包金额最小为"+ Number(this.configInfo.red_min_amount))
					return
				}
				this.keyboardShow=true
			},
			getconfig(){
				redConfig().then(res=>{
					this.configInfo=res.data
				})
			},
			isClose() {
				this.keyboardShow = false
				
			},
			// 输入密码
			changePwd(val) {
				if (this.securityPwd.length < 6) {
					this.securityPwd += val;
					// console.log(this.securityPwd);
				} else {
					console.log('超出不累计');
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},
			goCover(){
				uni.navigateTo({
					url:"/pageUser/redEnvelope/redEnvelopeCover"
				})
			},
					clickToggleHandle(ele, index) {
							this.indexs = index
							this.toggleList.forEach(item => item.select = false)
							// this.currLabel = ele.label
							ele.select = true
							this.type_red=ele.type_red
						},
		}
	}
</script>

<style lang="scss">
	.tab-nav {
		width: 750rpx;
		height: 80rpx;
		// background-color: #fff;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		// position: fixed;
		padding: 0 34rpx;
		z-index: 999;
		// justify-content: space-around;
	
		.tab-list-item {
			position: relative;
			margin-right: 72rpx;
	
			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
				z-index: 99;
				position: relative;
			}
	
			.active {
				font-weight: 700;
				color: #333333;
				z-index: 98;
				position: relative;
			}
	
			.line {
				width: 66rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
				border-radius: 118rpx 118rpx 118rpx 118rpx;
				position: absolute;
				top: 70%;
				left: 50%;
				transform: translate(-50%);
				z-index: 60;
			}
		}
	}
	.BoxNum{
		width: 690rpx;
		height: 104rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left{
		margin-left: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}
	.rights{
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		>input{
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			text-align: right;
			margin-right: 10rpx;
		}
	}
	.tag {
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
	
		}
		.tit{
			width: 690rpx;
			height: 130rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			>input{
				width: 690rpx;
				margin-left: 32rpx;
			}
		}
		.toright{
				margin-left: 20rpx;
				width: 14rpx;
				height: 28rpx;
			}
		.BoxMoney{
			width: 750rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: center;
			margin-top: 108rpx;
			>image{
				width: 64rpx;
				height: 58rpx;
			}
			>text{
				font-weight: 500;
				font-size: 88rpx;
				color: #CDAD74;
				margin-left: 20rpx;
			}
		}
		.btn{
			width: 360rpx;
			height: 88rpx;
			background: #FF5959;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			text-align: center;
			line-height: 88rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 86rpx;
		}
		.tips{
			width: 750rpx;
			text-align: center;
			margin-top: 356rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.keyboardss {
			width: 750rpx;
			padding: 50rpx 0;
			background: #ffffff;
		}
</style>